<template>
	<view class="box">




		<view class="bottom" v-for="(item,index) in list1" :key="index">
			<image :src="item.image" mode="" class="img1"></image>
			<p>{{p}}</p>
			<image :src="item.pndg" mode="" class="img2"></image>
			<view class="dangshi" @click="dangshi()">{{item.text}}</view>
			<view class="circle">
				<p class="today">{{item.texts}}</p>
				<p class="numb1">{{item.walk}}</p>
			</view>
			<button class="but">立即参与</button>
		</view>


		<view class="adas" :style="{display: currentId ? 'block' : 'none'}" >
			<view v-show="currentId" >
				<view class="" v-for="(item,index) in nav1" :key="index">
					<!-- 今日党史 Tue Aug 30 2022 -->
					<view class="red">
						{{item.date}}	
					</view>
					<view class="fas">
					<view class="white">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="box1">
						{{item.text}}
					</view>
					<button @click="but()">确认</button>
				</view>
				</view>
			

			</view>
		</view>



	</view>

</template>

<script>
	export default {
		data() {
			return {
				currentId: false,
				p: "长征精神，是中国共产党人和人民军队革命风范的生动反映,是中华民族自强不息的民族品格的集中展示,是以爱国主义为核心的民族精神的最高体现.长征精神为中国革命不断从胜利走向胜利提供了强大精神动力,继承和发扬长征精神，对于建设有中国特色的社会主义实现中华民族伟大复兴的强国梦，具有重大意义。",
				list1: [],
				nav1:[]
			}
		},
		onLoad() {
			this.index(),
			this.nav()
		},
		methods: {
			index() {
				var that = this
				uni.request({
					url: "http://43.143.147.173:8090/chuxing/Index/baner",
					data: "",
					success(res) {
						console.log(res.data.data)
						var datas = res.data.data
						that.list1 = datas
					}
				})
			},
			nav() {
				var that = this
				uni.request({
					url: "http://43.143.147.173:8090/chuxing/Index/party",
					data: "id:id",
					success(res) {
						console.log(res.data.data)
						var datas = res.data.data
						that.nav1 = datas
					}
				})
			},
			dangshi: function() {
				let that = this
				that.currentId = !that.currentId
				console.log(that.currentId)
				// uni.navigateTo({
				// 	url:"/pages/personal/today"
				// })

			},
			but: function() {
				let that = this
				that.currentId = !that.currentId
				console.log(that.currentId)
				// uni.navigateTo({
				// 	url:"/pages/personal/today"
				// })
			
			}
		}
	}
</script>

<style>
	.box {
		position: relative;
	}



	.img1 {
		position: relative;
		width: 100%;
	}

	.dangshi {
		width: 8rem;
		background-color: #f00;
		border-radius: 1rem;
		/* text-align: center; */
		padding: 0 1rem;
		position: absolute;
		top: 5rem;
		right: -55px;
		color: #fff;
	}

	.bottom {
		width: 100%;
		height: 100%;
	}

	.bottom p {
		width: 90%;
		margin: 0 auto;
		font-size: 35rpx;
		padding: 1rem 0;
	}

	.bottom .img2 {
		opacity: 0.1;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: -999;
	}

	.circle {
		width: 300rpx;
		height: 300rpx;
		border: #f00 0.5rem solid;
		border-radius: 50%;
		margin: 0 auto;
		text-align: center
	}

	.circle p {
		font-size: 1.1rem;
	}

	.circle .numb1 {
		color: #f00;
	}

	.but {
		width: 50%;
		margin: 2rem auto;
		background-color: #f00;
		color: #fff;
	}




	/* 弹窗 */
	.adas {
		position: fixed;
		z-index: 999;
		top: 180rpx;
		width: 80%;
		left: 90rpx;
	}

	.fas {
		background-color: #fff;
		padding: 5px;
	}

	.red {
		width: 100%;
		margin: 0 auto;
		background-color: #f00;
		padding: 10px;
		color: #fff;
		text-align: center;
		font-size: 35rpx;
	}

	.white image {
		width: 80%;
		height: 300rpx;
		margin-left: 75rpx;
	}

	.box1 {
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
</style>
